<template>
    <div class="box" style="overflow:auto">
        <div v-if="list.length==0">
            <el-empty description="暂无消息"></el-empty>
        </div>
        <div v-for="(one,index) in list" :key="one.id" v-if="list.length>0">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <i class="el-icon-message-solid" style="font-size: 20px; color: #409EFF;"></i>
                    <span>{{one.senderName}}</span>
                    <el-badge value="new"  v-if="!one.readFlag"/>
                    <span>{{one.sendTime}}</span>
                    <el-button style="float: right; padding: 3px 0" type="text" @click="readMessage(one.refId)" v-if="!one.readFlag">接收</el-button>
                    <el-button style="float: right; padding: 3px 0" type="text"  @click="deleteMessage(one.refId)" v-else>删除消息</el-button>
                </div>
                <div>
                    {{one.msg}}
                </div>
            </el-card>
            <div style="height: 20px"></div>
        </div>
    </div>
</template>
<script>
import index from "vuex";
import {EventBus} from "@/event-bus";
export default {
    computed: {
        index() {
            return index
        }
    },
    data() {
        return {
            loading: false,
            page: 1,
            length: 40,
            list: [],
            isLastPage: false
        }
    },
    created() {
        EventBus.$on('newWebSocketMessage', (ref)=> {
            if (ref==="new message"){
                this.loadMessageList(this);
            }

        });
    },
    beforeDestroy() {
        EventBus.$off('newWebSocketMessage', ()=> {
            this.loadMessageList(this);
        });
    },
    mounted() {
        this.loadMessageList(this);
    },
    methods: {
        loadMessageList(ref){
            let data = {
                page: ref.page,
                length: ref.length
            };
            ref.$http('/message/searchMessageByPage','POST', data, (resp)=> {
                let result = resp.data.result;
                if (result == null || result.length === 0) {
                    ref.isLastPage = true;
                    ref.$message.info('没有更多了');
                    if(ref.list.length<=1){
                        ref.list=[];
                    }
                } else {
                    if (ref.page === 1) {
                        ref.list = [];
                    }
                    ref.list = ref.list.concat(result);
                    if (ref.page > 1) {
                       ref.$message.success('加载成功');
                    }
                }
            });
        },
        deleteMessage(id){
            let that = this;
            that.$confirm(`确认删除吗？`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center:true
            }).then(() => {
                that.$http('/message/deleteMessageRefById','POST', {
                    "id":id
                }, (resp)=> {
                    if (resp.data.code === 20000) {
                        that.$message({
                            message: '操作成功',
                            type: 'success'
                        });
                        that.loadMessageList(that);
                    } else {
                        that.$message.error(resp.data.msg);
                    }
                });
            }).catch(error => {
                console.log(error)
            });
        },
        readMessage(id){
            let that = this;
            this.$http("/message/updateUnreadMessage", "POST", {
                "id": id
            }, (resp)=> {
                if (resp.data.code === 20000){
                    that.$message({
                        message: '操作成功',
                        type: 'success'
                    });
                    location.reload()
                }
            })
        }
    }
}
</script>
<style>
.box{
    height: 450px;
}
</style>